<template>
	<view>
		<!-- 顶部导航栏 -->
		<view class="hander-tab">
			<view class="hander-text">
				小镇APP
			</view>
			<view class="hander-icon">
				<!-- <u-icon class="icon1" name="search" color="#0f0f0f" size="28"></u-icon> -->
				<u-icon @click="toaddarticle" name="edit-pen" color="#0f0f0f" size="28"></u-icon>
			</view>
		</view>
		<!-- <dcp-scroller :isLoading="isLoading" @refresh="refresh"> -->
		<!-- 轮播 -->
		<Xsuu-swiper v-if="swiperItems.length" :borderRadius="10" :swiperItems="swiperItems"></Xsuu-swiper>
		<!-- 模块标题 -->
		<view class="common-title">推荐</view>
		<!-- 文章 -->
		<xz-article @opencommon="opencommon" :postdata="postdata"></xz-article>
		<u-loadmore @loadmore="getposts" :status="loading" loadingIcon="circle" loadmoreText="上拉发现更多角落"
			nomoreText="这个世界依旧空旷" loadingText="正在寻找世界上最后一个角落"></u-loadmore>
		<!-- </dcp-scroller> -->
	</view>
</template>

<script>
	import xZarticle from "../../components/xz-article/xz-article.vue"
	import XsuuSwiper from "../../components/Xss-swiper/Xsuu-swiper.vue"
	export default {
		components: {
			XsuuSwiper,
			xZarticle
		},
		data() {
			return {
				loading: 'loadmore',
				postdata: [],
				isLoading: false,
				//每页查询数据条数
				pagetotal: 10,
				//当前页
				pagesize: 1,
				swiperItems: [],
				user_id:null,
			}
		},
		onLoad() {
			this.getbanner()
			this.getuser()
		},
		onReachBottom() {
			this.getposts()
		},
		methods: {
			getuser(){
				uni.getStorage({
					key:'userinfo',
					success: (res) => {
						this.user_id=res.data.id
						this.getpost()
					},
					fail: (err) => {
						this.getpost()
					}
				})
			},
			//跳转发布页
			toaddarticle() {
				//发布前需要判断用户是否登录
				if (this.user_id) {
					uni.navigateTo({
						url: '/pages/addarticle/addarticle'
					})
				} else{
					uni.showModal({
						content:"请先登录",
						cancelText:"先逛逛",
						success: (res) => {
							if (res.confirm) {
								uni.reLaunch({
									url:'/pages/login/login'
								})
							} else{
								
							}
						}
					})
				}
			},
			//获取轮播
			getbanner() {
				this.$http({
					url: '/api/getbanner',
					data: {
						type: 0
					},
					header_type: 0,

				}).then(res => {
					this.swiperItems = res.results
					console.log(res);
				})
			},
			//获取默认10条数据
			getpost() {
				this.$http({
					url: '/api/getarticle',
					data: {
						pagetotal: this.pagetotal,
						pagesize: this.pagesize,
						user_id:this.user_id?this.user_id:null
					},
				}).then(res=>{
					console.log(res);
					this.pagesize++
					this.postdata = res
				})
			},
			//触底加载
			getposts() {
				this.loading = 'loading'
				this.$http({
					url: '/api/getarticle',
					data: {
						pagetotal: this.pagetotal,
						pagesize: this.pagesize,
					},
				}).then(res=>{
					if (res.length == 0) {
						setTimeout(res => {
							this.loading = 'nomore'
						}, 500)
					} else {
						this.pagesize++
						this.postdata.push(...res.data)
						setTimeout(res => {
							this.loading = 'loadmore'
						}, 500)
					}
				})
			},
			refresh() {
				this.isLoading = true;
				setTimeout(() => {
					this.isLoading = false;
				}, 2000);
			},
			load() {
				this.$refs.uReadMore.init();
			}
		}
	}
</script>

<style lang="scss">
	.hander-tab {
		position: sticky;
		z-index: 99;
		top: 0;
		display: flex;
		justify-content: space-between;
		/* #ifdef MP-WEIXIN */
		padding: 80rpx 20rpx 0rpx 20rpx;
		/* #endif */
		/* #ifndef MP-WEIXIN */
		padding: 0 20rpx;
		/* #endif */
		height: 100rpx;
		align-items: center;
		background-color: #ffffff;
	}

	.hander-text {
		font-size: 40rpx;
	}

	.hander-icon {
		display: flex;
		/* #ifdef MP-WEIXIN */
		margin-right: 180rpx;
		/* #endif */
	}

	.hander-icon .icon1 {
		margin-left: 30rpx;
	}

	.common-title {
		margin: 20rpx;
		padding: 0 20rpx;
		display: flex;
		align-items: center;
		border-left: 10rpx solid #3668fc;
	}

	.common-post {
		padding: 20rpx;
	}

	.common-user {
		display: flex;
	}

	.common-time {
		font-size: 24rpx;
		color: #a5a5a5;
	}

	.common-user .users {
		margin-left: 20rpx;
	}

	.common-username {
		display: flex;
		align-items: center;
	}

	.common-post-title {
		padding: 20rpx;
	}

	.common-post-todos {
		padding: 20rpx 20rpx 0 20rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.common-post-labe {
		font-size: 24rpx;
	}

	.common-post-todo {
		display: flex;
		align-items: center;
	}

	.common-post-eye {
		display: flex;
		align-items: center;
	}

	.topic {
		color: #595959;
		background-color: #f5f5f5;
		margin: 0 10rpx 0 0;
		padding: 10rpx 20rpx;
		border-radius: 10rpx;
	}
</style>